
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>购物商城-购物车</title>
    <base href="${pageContext.request.scheme}://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath}/"/>
    <style>
        * {
            margin: 0 auto;
            padding:0;
            list-style: none;
        }
        .header-a{
            text-decoration: none;
            color: #CCCCCC;
        }
        .header-a:hover{
            color: black;
        }
        .header_li1{
            float: left;
            line-height: 30px;
            margin-left: 24px;
            text-align: center;
        }
        .header_li1 a{
            color:#FFFFFF;
            text-decoration: none;
            font-size: 13px;
            border-right: #CCCCCC;
        }
        .header_li1 a:hover{
            color:#FFFF00;
        }
        .li1{
            height: 30px;
            line-height: 30px;
            margin-left: 5px;
            border-bottom: 1px solid #000000;
            font-size: 12px;
        }
        .li1a{
            text-decoration: none;
        }
        .span1{
            color:#F5D687;
            font-size: 18px;
            position: absolute;
            right: 5px;
        }
        .imag{
            padding-top: 5px;
            /*height:130px;*/
            height: 80px;
        }
        .table_div:hover{
            border:2px solid lightskyblue;
        }
        .table_div {
            border: 2px solid #DDDDDD;
            height: 100px;
            width: 160px;
        }
        .table_p a {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp:2;
            -webkit-box-orient: vertical;
        }
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }
        input[type="number"]{
            -moz-appearance: textfield;
        }
    </style>
    <script src="js/jquery-3.1.1.min.js"></script>
    <script>
        function deleteShopCar(id) {
            if(confirm("确定删除该商品吗？")) {
                $.get("deleteByShopCarId",{shopCarId:id},function (data) {
                    alert(data.msg)
                    window.location.reload()
                },"json")
            }
        }
        function plusButton(id) {
            var str = "#" + id;
            $(str).val(parseInt($(str).val()) + 1)
            computeCountAndPrice();
        }
        function subButton(id) {
            var str = "#" + id;
            var buyNum = $(str).val();
            if(buyNum  <= 1) {
                $(str).val(1)
            }else {
                $(str).val(parseInt($(str).val()) - 1)
            }
            computeCountAndPrice();
        }
        // 获取选中的值
        function submitShopCar() {
            var shopCarIdList = [];
            $("input[name='ck']:checked").each(function () {//
                shopCarIdList.push($(this).val());
            });
            var shopCarBuyNumList = [];
            $("input[name='ck']:checked").parent().parent().find("input[type='number']").each(function () {
                shopCarBuyNumList.push($(this).val())
            })
            if(shopCarIdList.length == 0 || shopCarBuyNumList.length == 0) {
                alert("请勾选需要结算的商品!!!")
            }
            $.ajax({
                type:"post",
                url:"submitShopCar",
                traditional:true,
                data:{shopCarIdStr:shopCarIdList,shopCarBuyNumStr:shopCarBuyNumList},
                dataType:"json",
                success:function (data) {
                    if(data.status == 200) {
                        window.location.href="toOrderPage";
                    }else {
                        alert(data.msg);
                    }
                }
            })
        }
        function computeCountAndPrice() {
            var totalCount = 0;
            var totalPrice = 0;
            var totalCountArray = [];
            var totalPriceArray = [];
            var totalDiscountArray = [];
            $("input[name='ck']:checked").parent().parent().find("input[type='number']").each(function () {
                totalCount += parseInt($(this).val())
                totalCountArray.push(parseFloat($(this).val()))
            })
            $("input[name='ck']:checked").parent().parent().find(".yuanjia").each(function () {
                totalPriceArray.push(parseFloat($(this).html()))
            })
            $("input[name='ck']:checked").parent().parent().find(".discount").each(function () {
                totalDiscountArray.push(parseFloat($(this).html()))
            })
            $("input[name='ck']:checked").parent().parent().find(".xiaoji").each(function (index,element) {
                $(this).html((totalPriceArray[index] * totalCountArray[index] * totalDiscountArray[index]).toFixed(2))
                totalPrice += parseFloat($(this).html())

            })
            $("#totalCount").html(totalCount)
            $("#totalPrice").html(totalPrice.toFixed(2))
        }
        $(function () {
            var userName = "${user.name}"
            var text = "[<a href= 'toLoginPage'>登录</a>]&nbsp;[<a href= 'toRegisterPage'>免费注册</a>]"
            if(userName != "") {
                text = userName + "&nbsp;&nbsp[<a href= 'logout'>注销</a>]";
            }
            $("#loginSpan").html(text)
            <c:forEach var="shopCarVO" items="${shopCarVOList}">
                var price = ${shopCarVO.price};
                var discount = ${shopCarVO.discount};
                var buyNum = ${shopCarVO.buyNum}
                function computePrice() {
                    var result = (price * discount * buyNum ).toFixed(2);
                    return  result;
                }
                $("#${shopCarVO.articleId}").html(computePrice());
            </c:forEach>
            computeCountAndPrice();
            // 全选
            $("#allChecked").click(function () {
                $("input[name='ck']").prop("checked", $("#allChecked").prop("checked"));
                computeCountAndPrice();
            })
            // 单个复选框的点击事件
            $("input[name='ck']").click(function () {
                computeCountAndPrice();
                var allSel = false;
                $("input[name='ck']").each(function(){
                    if(!$(this).is(':checked')){
                        allSel = true;
                    }
                })
                //如果有复选框没有被选中
                if(allSel){
                    $("#allChecked").prop('checked',false);
                }else{
                    $("#allChecked").prop('checked',true);
                }
            })
            $("input[type='number']").change(function () {
                var buyNum = $(this).val()
                if(buyNum  <= 1) {
                    $(this).val(1)
                }
                computeCountAndPrice();
            })
        });

    </script>
</head>
<body>

<div style="height: 32px;width: 100%;background-color: #EFEFEF;">
    <!--头页的第一部分-->
    <div style="height: 32px;width: 1000px;font-size: 12px;line-height: 32px;text-align:right">
        官方网站<a href="https://www.douyu.com/directory/myFollow">http://gz.gec-edu.org/?gzbdgzbdyueqianpc23</a>
        <span id="loginSpan"></span>
        [<a href="toShopCarPage">我的购物车</a>]
        [<a href="toOrderDetailPage">我的订单</a>]
        [<a href="#">设置为首页</a>]
        [<a href="#">加入收藏</a>]
    </div>
    <!--头页的第二部分-->
    <div style="width: 1000px;height: 150px;;position: relative">
        <img src="images/article/logo.gif">
        <img src="images/banner.gif" alt="" style="margin-top: 10px">

        <div style="position: absolute;right: 50px;top: 30px;font-size: 12px">
            <div style="border: 1px solid #CCCCCC;width: 70px;height: 20px;line-height:20px;text-align: center"><a href="#" style="" class = "header-a">关于我们</a></div>
            <div style="margin-top: 10px;border: 1px solid #CCCCCC;width: 70px;height: 20px;line-height:20px;text-align: center"><a href="#" style="" class = "header-a">联系方式</a></div>
        </div>
    </div>
    <!--头页的第三部分-->
    <div style="width: 100%;height: 30px;background-color: #CC3333 ">
        <div style="width: 1000px;height: 30px;">
            <ul>
                <li class="header_li1"><a href="#"> 首页</a></li>
                <li class="header_li1"><a href="getArticleType?type_code=0001"> 护肤</a></li>
                <li class="header_li1"><a href="getArticleType?type_code=0002"> 彩妆</a></li>
                <li class="header_li1"><a href="getArticleType?type_code=0003"> 香氛</a></li>
                <li class="header_li1"><a href="getArticleType?type_code=0004"> 身体护理</a></li>
                <li class="header_li1"><a href="getArticleType?type_code=0005"> 礼盒套装</a></li>
                <li class="header_li1"><a href="getArticleType?type_code=0006"> 母婴专区</a></li>
                <li class="header_li1"><a href="getArticleType?type_code=0007"> 男士专区</a></li>
                <li class="header_li1"><a href="getArticleType?type_code=0008"> 粉底</a></li>
                <li class="header_li1"><a href="getArticleType?type_code=0009"> 粉饼</a></li>
                <li class="header_li1"><a href="getArticleType?type_code=0010"> 睫毛膏</a></li>
                <li class="header_li1"><a href="getArticleType?type_code=0011"> 唇彩</a></li>
                <li class="header_li1"><a href="getArticleType?type_code=0012"> 腮红</a></li>
                <li class="header_li1"><a href="getArticleType?type_code=0013"> 食品保障</a></li>
                <li class="header_li1"><a href="getArticleType?type_code=0014"> 瘦身类</a></li>
                <li class="header_li1"><a href="getArticleType?type_code=0015"> 美容类</a></li>
            </ul>

        </div>

    </div>
</div>

<div style="width: 1000px;margin-top: 180px;">
    <div>
        <span style="margin-left: 20px">当前位置&gt;&gt;我的购物车</span>
    </div>
    <div>
        <c:if test="${not empty shopCarVOList}">
            <div style="margin-top: 15px;text-align: center;font-size: 12px;width: 1000px;height: 35px;line-height: 35px;background-color: #F7F4EB;color: #ACA9A3;border-bottom: #E0CBB5 2px solid">
                <ul>
                    <li  style="float: left;width: 5%;">
                        <input type="checkbox" id="allChecked" checked>全选
                    </li>
                    <li  style="float: left;width: 35%">商品名称</li>
                    <li  style="float: left;width: 10%">积分</li>
                    <li  style="float: left;width: 15%">疯狂价</li>
                    <li  style="float: left;width: 15%">小计</li>
                    <li  style="float: left;width: 10%">数量</li>
                    <li  style="float: left;width: 10%">操作</li>
                </ul>
            </div>
            <table style="text-align: center;font-size: 12px;width: 1000px;border-spacing: 0">
                <c:forEach var="shopCarVO" items="${shopCarVOList}">
                    <tr style="height: 50px">
                        <td style="width: 5%;border-bottom: #CCCCCC 2px solid">
                            <input type="checkbox" value="${shopCarVO.shopCarId}" name="ck" checked>
                        </td>
                        <td style="width: 10%;border-bottom: #CCCCCC 2px solid">
                            <img src="images/article/${shopCarVO.image}" width="80px">
                        </td>
                        <td style="width: 25%;border-right: #CCCCCC 2px solid;border-bottom: #CCCCCC 2px solid">
                            <a href="toArticleInfoPage?articleId=${shopCarVO.articleId}">${shopCarVO.title}</a>
                        </td>
                        <td style="width: 10%;border-right: #CCCCCC 2px solid;border-bottom: #CCCCCC 2px solid">${shopCarVO.jifen}</td>
                        <td style="width: 15%;border-right: #CCCCCC 2px solid;border-bottom: #CCCCCC 2px solid;color: red;font-weight: bold">￥<span class="yuanjia">${shopCarVO.price}</span>(<span class="discount">${shopCarVO.discount}</span>折)</td>
                        <td style="width: 15%;border-right: #CCCCCC 2px solid;border-bottom: #CCCCCC 2px solid">￥<span id="${shopCarVO.articleId}" class="xiaoji"></span></td>
                        <td style="width: 10%;border-right: #CCCCCC 2px solid;border-bottom: #CCCCCC 2px solid"><input  type="submit" style="color: red;margin-left: 5px;text-align: center" value="+" onclick="plusButton(${shopCarVO.shopCarId})"><input id="${shopCarVO.shopCarId}"  type="number" style="width: 50px;margin-left: 5px;text-align: center" value="${shopCarVO.buyNum}"><input  type="submit" style="color: red;margin-left: 5px;text-align: center" value="&nbsp;-&nbsp;" onclick="subButton(${shopCarVO.shopCarId})" ></td>
                        <td style="width: 10%;border-right: #CCCCCC 2px solid;border-bottom: #CCCCCC 2px solid">
                            <a href="#">移入收藏</a>
                            <br>
                            <a href="javascript:;" onclick="deleteShopCar(${shopCarVO.shopCarId})">删除</a>
                        </td>
                    </tr>
                </c:forEach>
            </table>
            <div style="width: 1000px;font-size: 20px;font-weight: bold;text-align: right">
                <p style="margin-top: 20px">数量总计：&nbsp;&nbsp;<span style="color: red" id="totalCount">13</span>&nbsp;&nbsp;件</p>
                <p style="margin-top: 20px">总金额：&nbsp;&nbsp;<span style="color: red" id="totalPrice">1322</span>&nbsp;&nbsp;折后价</p>
                <p><a href="getArticleType"><img src="images/shop.jpg" alt=""></a>&nbsp;&nbsp;<a href="javascript:;" onclick="submitShopCar()" ><img src="images/balance.jpg" alt="" style="margin-left: 15px"></a></p>
            </div>
        </c:if>
        <c:if test="${empty shopCarVOList}">
            <h1 style="width: 1000px;text-align: center;height: 200px;line-height: 200px"><a href="getArticleType">当前购物车为空,请前往首页购物</a></h1>
        </c:if>
        <div style="width: 1000px;margin-top: 450px">
            <img src="images/step.jpg" alt="">
        </div>

    </div>
</div>
</body>
</html>
